<template>
	<div class="container">
		<div class="tab-c">
			<div class="left" @click="all">
				<span :style="{'color': tabIndex === 0 ? '#FBD46D' : 'balck', 'font-weight': tabIndex === 0 ? 'bold' : '','border-bottom':tabIndex===0 ? '1px solid':'','line-height':tabIndex===0 ? '35px':''}">全部订单</span>
			</div>
			<div class="left" @click="deliveryClick">
				<span :style="{'color': tabIndex === 1 ? '#FBD46D' : 'balck', 'font-weight': tabIndex === 1 ? 'bold' : '','border-bottom':tabIndex===1 ? '1px solid':'','line-height':tabIndex===1 ? '35px':''}">待评价</span>
			</div>
			<div class="right" @click="pickClick">
				<span :style="{'color': tabIndex === 2? '#FBD46D' : 'balck', 'font-weight': tabIndex === 2 ? 'bold' : '','border-bottom':tabIndex===2 ? '1px solid':'','line-height':tabIndex===2 ? '35px':''}">退款</span>
			</div>

		</div>
		<div class="list-c" v-if="isLogin">
			<div class="item" v-for="(item, index) in orderList" :key="index">
				<div class="shop-info" @click="headerClick">
					<img :src="item.logo">
					<span class="shopshop-name">{{item.name}}</span>
					<div class="foodType">
						<span v-if="item.type==4">外卖订餐</span>
						<span v-if="item.type==0">店内堂食</span>
						<span v-if="item.type==1">店内扫码堂食</span>
						<span v-if="item.type==2">店内快餐叫号</span>
						<span v-if="item.type==3">线上点餐</span>
						<span v-if="item.type==5">线上快餐</span>
						<span v-if="item.type==6">本地预定</span>
					</div>
					<i class="icon mt-arrow-right-o"></i>

					<span class="order-status" v-if="item.status==0">待支付</span>
					<span class="order-status" v-if="item.status==1">等待商家接单</span>
					<span class="order-status" v-if="item.status==2 && item.type==4">备餐中</span>
					<span class="order-status" v-if="item.status==2 && item.type!=4">待就餐</span>
					<span class="order-status" v-if="item.status==3">待就餐</span>
					<span class="order-status" v-if="item.status==4">骑手接单</span>
					<span class="order-status" v-if="item.status==5">配送中</span>
					<span class="order-status" v-if="item.status==6">待评价</span>
					<span class="order-status" v-if="item.status==7">已完成</span>
					<span class="order-status" v-if="item.status==8">订单已取消</span>

				</div>
				<div class="googs-c" @click="orderDetail">
					<div class="goods" v-for="(itx, idx) in item.foodList" :key="idx">
						<span class="s-l">{{itx.name}}</span>
						<span class="s-r">x{{itx.foodNum}}</span>
					</div>
				</div>
				<div class="price">
					<span class="count">共{{item.foodList.length}}件商品，实付</span>
					<span class="amount">￥{{item.realMoney}}</span>
				</div>
				<div class="bottom-c">
					<div class="btn" @click="headerClick" v-if="item.status==6 || item.status==7">
						<span>再来一单</span>
					</div>
					<div class="btn pingjia" @click="e_evaluate(item)" v-if="item.status==6">
						<span>评价</span>
					</div>
					<div class="btn pingjia" @click="outOrder(item.id)" v-if="item.status==2 && item.type!=4">
						<span>出单</span>
					</div>
						<div class="btn pingjia" @click="outMoney(item.id)" v-if="item.status==1">
						<span>退款</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 没有登陆遮罩框 -->
		<div class="logingBox" v-if="!isLogin">
			<img class="logingBoxicon" src="https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/f81477e577b020a69397e6fb2a31e43a.png" alt="">
			<span class="logingtext">您还没有登陆，请登录后查看订单</span>
			<div class="logingBtn" @click="getUserInfo1">
				<span>登录</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			orderList: [],
			isLogin: false,
			isAuthorize: false,
			tabIndex: 0,
		}
	},
	onLoad() {
		this.getOrderList()
				//获取订单列表、

			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/wechat/desk/DCopenTable?RestaurantId=1003&deskId=1',
				method: 'post',
				
			}
			this.$JZFormdata(getParams).then(re => {
				console.log(re)
				var id=re.data.restaurantId
				var orderId=re.data.orderId
				wx.navigateTo({
					url:'/pages/shoppingCart/main?orderId='+orderId+'&id='+id
				})
				console.log('扫码点餐',re)
			})
		
	},
		onReachBottom() {
		
		this.getOrderList()
	},
	onShow(){
	this.getOrderList()
	},

	methods: {
		//全部
		all() {
			this.tabIndex = 0
		},
		//外卖
		deliveryClick() {
			this.tabIndex = 1
		},
		//堂食
		pickClick() {
			this.tabIndex = 2
		},
		//预约快餐
		pickHurrey() {
			this.tabIndex = 3
		},

		//获取订单列表、
		getOrderList() {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/miniprogramOrder/myOrderList',
				method: 'post',
				data: {
					userId: userId,
					type: 0,
				},
			}
			this.$JZWX(getParams).then(re => {
				this.orderList = re.data
				console.log(re)
			})
		},
		//退款
		outMoney(id){
			console.log('订单id',id)
				let getParams = {
				url: '/miniprogramOrder/refund',
				method: 'post',
				data: id,
			}
			this.$JZWX(getParams).then(re => {
				wx.showToast({
					title:re.msg
				})
			})
this.getOrderList()
		},
				//出单通知后厨打印
		outOrder(id){
			console.log('订单id',id)
				let getParams = {
				url: '/miniprogramOrder/printOrder',
				method: 'post',
				data: id,
			}
			this.$JZWX(getParams).then(re => {
				wx.showToast({
					title:re.msg
				})
				this.getOrderList()
			})

		},
		/**
		 * 检测是否授权
		 */
		getSetting() {
			var that = this
			wx.getSetting({
				success: function(res) {
					if (res.authSetting['scope.userInfo']) {
						wx.getUserInfo({
							success: function(res) {
								that.isAuthorize = true
								// that.wxLogin()
								// that.userInfo = res.userInfo
							},
						})
					} else {
					}
				},
			})
		},
		/**
		 * 点击登录按钮
		 */
		getUserInfo1() {
			if (this.isAuthorize) {
				wx.navigateTo({
					url: '/pages/login/main',
				})
			} else {
				wx.navigateTo({
					url: '/pages/authority/main',
				})
			}
		},
		headerClick() {
			wx.navigateTo({url: '/pages/shoppingCart/main'})
		},
		orderDetail() {
			wx.navigateTo({url: '/pages/orderDetail/main'})
		},
		/**
		 * @Description: ${评价}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/14
		 * @Version 1.0
		 */
		e_evaluate(item) {
			let orderInfo = {
				shopIcon: item.poi_pic,
				shopName: item.poi_name,
				orderId: item.poi_source_id,
			}
			this.$store.state.orderInfo = JSON.stringify(orderInfo)
			wx.navigateTo({url: '/pages/evaluate/main'})
		},
	},
	mounted() {},
	onShow() {
		this.isLogin = this.$store.state.user.islogin
	},
}
</script>

<style lang="scss" scoped>
.container {
	.logingBox {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		.logingBoxicon {
			width: 400rpx;
			height: 400rpx;
			opacity: 0.5;
		}
		.logingtext {
			font-size: 14px;
		}
		.logingBtn {
			width: 146rpx;
			height: 69rpx;
			text-align: center;
			line-height: 69rpx;
			background-color: #fecb55;
			margin: 30px 0;
			border-radius: 2px;
		}
	}
	.tab-c {
		display: flex;
		height: 88rpx;
		align-items: center;
		background-color: white;
		.left {
			align-items: center;
			justify-content: center;
			display: flex;
			flex: 1;
			font-size: 32rpx;
			color: $textBlack-color;
			height: 88rpx;
		}
		.right {
			@extend .left;
			// background-color: $page-bgcolor;
		}
	}
	.list-c {
		display: flex;
		flex-direction: column;
		.item {
			display: flex;
			flex-direction: column;
			background-color: white;
			margin-top: 20rpx;
			.shop-info {
				display: flex;
				height: 120rpx;
				background-color: white;
				align-items: center;
				border-bottom: 2rpx solid $spLine-color;
				margin-left: 30rpx;
				margin-bottom: 10rpx;
				img {
					width: 80rpx;
					height: 80rpx;
				}
				.shopshop-name {
					font-size: 32rpx;
					color: $textBlack-color;
					margin-left: 10rpx;
					font-weight: bold;
				}
				.foodType {
					font-size: 25rpx;
					padding-left: 20rpx;
				}
				i {
					font-size: 28rpx;
					color: $textGray-color;
					margin-left: 10rpx;
					flex: 1;
				}
				.order-status {
					font-size: 28rpx;
					color: $textDarkGray-color;
					display: flex;
					margin-right: 20rpx;
				}
			}
			.googs-c {
				display: flex;
				background-color: white;
				flex-direction: column;
				.goods {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 120rpx;
					margin-right: 20rpx;
					.s-l {
						font-size: 28rpx;
						color: $textDarkGray-color;
						padding: 10rpx 0;
					}
					.s-r {
						font-size: 24rpx;
						color: $textBlack-color;
					}
				}
			}
			.price {
				display: flex;
				margin: 20rpx;
				justify-content: flex-end;
				.count {
					font-size: 24rpx;
					color: $textDarkGray-color;
				}
				.amount {
					font-size: 24rpx;
					color: $textBlack-color;
					font-weight: bold;
				}
			}
			.bottom-c {
				display: flex;
				margin-left: 30rpx;
				border-top: 2rpx solid $spLine-color;
				align-items: center;
				background-color: white;
				justify-content: flex-end;
				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid $spLine-color;
					margin: 20rpx;
					border-radius: 4rpx;
					span {
						font-size: 28rpx;
						color: $textBlack-color;
						margin: 16rpx 24rpx;
					}
					&.pingjia {
						background-color: #fecb55;
						border: none;
					}
				}
			}
		}
	}
}
</style>
